const dataSource = "https://s5.ssl.qhres2.com/static/b0695e2dd30daa64.json";

(async function () {
  const data = await (await fetch(dataSource)).json();

  const regions = d3
    .hierarchy(data)
    .sum((d) => 1)
    .sort((a, b) => b.value - a.value);

  const pack = d3.pack().size([1600, 1600]).padding(3);

  const root = pack(regions);

  const svgroot = document.querySelector("svg");

  function draw(
    parent,
    node,
    { fillStyle = "rgba(0,0,0,0.2)", textColor = "white" } = {}
  ) {
    const children = node.children;
    const { x, y, r } = node;
    const circle = document.createAttributeNS(
      "http://www.w3.org/2000/svg",
      "circle"
    );
    circle.setAttribute("cx", x);
    circle.setAttribute("cy", y);
    circle.setAttribute("r", r);
    circle.setAttribute("fill", fillStyle);
    circle.setAttribute("data-name", node.data.name);

    parent.appendChild(circle);

    if (children) {
      const group = document.createAttributeNS(
        "http://www.w3.org/2000/svg",
        "g"
      );
      for (let i = 0; i < children.length; i++) {
        draw(group, children[i], {
          fillStyle,
          textColor,
        });
        group.setAttribute("data-name", node.data.name);
        parent.appendChild(group);
      }
    } else {
      const text = document.createElementNS(
        "http://www.w3.org/2000/svg",
        "text"
      );
      text.setAttribute("fill", textColor);
      text.setAttribute("font-family", "Arial");
      text.setAttribute("font-size", "1.5rem");
      text.setAttribute("text-anchor", "middle");
      text.setAttribute("x", x);
      text.setAttribute("y", y);
      const name = node.data.name;
      text.textContent = name;
      parent.appendChild(text);
    }
    draw(svgroot, root);

    const titleEl = document.getElementById("title");

    function getTitle(target) {
      const name = target.getAttribute("data-name");
      if (target.parentNode && target.parentNode.nodeName === "g") {
        const parentName = target.parentNode.getAttribute("data-name");
        return `${parentName}-${name}`;
      }
      return name;
    }

    let activeTarget = null;
    svgroot.addEventListener("mousemove", (evt) => {
      let target = evt.target;
      if (target.nodeName === "text") target = target.previousSibling;
      if (activeTarget !== target) {
        if (activeTarget)
          activeTarget.setAttribute("fill", "rgba(0, 0, 0, 0.2)");
      }
      target.setAttribute("fill", "rgba(0, 128, 0, 0.1)");
      titleEl.textContent = getTitle(target);
      activeTarget = target;
    });
  }
})();
